<template>
  <div class="theme-switcher">
    <!-- 主题设置按钮 -->
    <div class="theme-btn" @click="showSettings = true">
      <img src="/assets/dashboard/icon_yanse_nor.svg" />
    </div>

    <el-drawer
      v-model="showSettings"
      title="主题设置"
      direction="rtl"
      size="300px"
    >
      <div class="theme-settings">
        <!-- 主题模式 -->
        <div class="setting-section">
          <h4>主题模式</h4>
          <el-radio-group
            v-model="themeConfig.mode"
            @change="handleThemeChange"
          >
            <el-radio-button label="light">浅色</el-radio-button>
            <el-radio-button label="dark">深色</el-radio-button>
            <el-radio-button label="auto">自动</el-radio-button>
          </el-radio-group>
        </div>

        <!-- 主色调设置 -->
        <div class="setting-section">
          <h4>主色调</h4>
          <div class="color-picker-section">
            <el-color-picker
              v-model="primaryColor"
              @change="handlePrimaryColorChange"
              show-alpha
            />
            <span class="color-value">{{ primaryColor }}</span>
          </div>
        </div>

        <!-- 预设颜色 -->
        <div class="setting-section">
          <h4>预设颜色</h4>
          <div class="preset-colors">
            <div
              v-for="color in presetColors"
              :key="color"
              class="preset-color"
              :class="{ active: color === themeConfig.colors.primary }"
              :style="{ backgroundColor: color }"
              @click="setPrimaryColor(color)"
            />
          </div>
        </div>

        <!-- 系统颜色设置 -->
        <div class="setting-section">
          <h4>系统颜色</h4>
          <div class="system-colors">
            <div
              v-for="(color, key) in themeConfig.colors"
              :key="key"
              class="color-item"
            >
              <span class="color-label">{{ colorLabels[key] }}</span>
              <el-color-picker
                :model-value="color"
                @change="(val: any) => setColor(key, val)"
                size="small"
              />
            </div>
          </div>
        </div>

        <!-- 重置按钮 -->
        <div class="setting-section">
          <el-button type="danger" @click="handleReset" style="width: 100%">
            重置主题
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useTheme, type ThemeMode } from '@/utils/useTheme';

const {
  themeConfig,
  currentTheme,
  setThemeMode,
  setPrimaryColor,
  setColor,
  resetTheme,
} = useTheme();

const showSettings = ref(false);
const primaryColor = ref(themeConfig.value.colors.primary);

// 预设颜色
const presetColors = [
  '#18B3AB', // 默认青色
  '#409EFF', // Element Plus 蓝色
  '#67C23A', // 绿色
  '#E6A23C', // 橙色
  '#F56C6C', // 红色
  '#909399', // 灰色
  '#9C27B0', // 紫色
  '#FF5722', // 深橙色
];

// 颜色标签
const colorLabels = {
  primary: '主要',
  success: '成功',
  warning: '警告',
  danger: '危险',
  info: '信息',
};

// 主题图标
const themeIcon = computed(() => {
  switch (currentTheme.value) {
    case 'light':
      return 'home';
    case 'dark':
      return 'close';
    default:
      return 'settings';
  }
});

const settingsIcon = 'settings';

// 处理主题切换
const handleThemeChange = (mode: any) => {
  setThemeMode(mode);
};

// 处理主色调变化
const handlePrimaryColorChange = (color: any) => {
  if (color) {
    setPrimaryColor(color);
  }
};

// 处理重置
const handleReset = () => {
  ElMessageBox.confirm('确定要重置所有主题设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      resetTheme();
      primaryColor.value = themeConfig.value.colors.primary;
      ElMessage.success('主题已重置');
    })
    .catch(() => {
      // 用户取消
    });
};

// 监听主题配置变化，同步 primaryColor
watch(
  () => themeConfig.value.colors.primary,
  (newColor) => {
    primaryColor.value = newColor;
  }
);
</script>

<style scoped lang="scss">
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;

  .theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.8);

    &:hover {
      color: white;
      background-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-1px);
    }

    :deep(.el-icon) {
      font-size: 16px;
    }
  }
}

.theme-settings {
  padding: 16px 0;

  .setting-section {
    margin-bottom: 24px;

    h4 {
      margin: 0 0 12px 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .color-picker-section {
    display: flex;
    align-items: center;
    gap: 12px;

    .color-value {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      font-family: monospace;
    }
  }

  .preset-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    .preset-color {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s;

      &:hover {
        transform: scale(1.1);
      }

      &.active {
        border-color: var(--el-color-primary);
        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
      }
    }
  }

  .system-colors {
    .color-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;

      .color-label {
        font-size: 13px;
        color: var(--el-text-color-regular);
      }
    }
  }
}

// 下拉菜单项样式
:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;

  &.active {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
  }
}
</style>
